<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :maskClosable="false"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">
    <div class="itxst">
      <a-row>
        <a-col :span="23" style="margin-right: 20px">
          <div class="col">
            <div class="title">未添加</div>
            <div style="overflow-y: auto;height: 200px;">
              <draggable v-model="mockData" :group="{ name: 'site', pull: true, put: false}" animation="300" dragClass="dragClass" ghostClass="ghostClass"
                         chosenClass="chosenClass" @start="onStart" @end="onEnd">
                <transition-group :style="style">
                  <div class="group" v-for="item in mockData" :key="item.id">{{item.name}}</div>
                </transition-group>
              </draggable>
            </div>
          </div>
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="23">
          <div class="col">
            <div class="title">已添加</div>
            <div style="overflow-y: auto;height: 200px;">
              <draggable v-model="quickPathData" group="site" animation="100" dragClass="dragClass" ghostClass="ghostClass"
                         chosenClass="chosenClass" @start="onStart" @end="onEnd" @add="add" @update="update">
                <transition-group :style="style">
                  <div class="group" v-for="item in quickPathData" :key="item.id">{{item.name}}</div>
                </transition-group>
              </draggable>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </j-modal>
</template>
<script>
  import draggable from "vuedraggable"
  import { getAction, postAction } from '@/api/manage'
  export default {
    name: "Draggable",
    components: {
      draggable,
    },
    data() {
      return {
        title:'快捷入口设置',
        width: '90%',
        visible: false,
        disableSubmit: false,
        mockData: [],
        quickPathData: [],
        style: 'min-height:120px;display: block;',
        url: {
          quickPathList:'/quickPath/queryList',
          add: '/quickPathUser/add',
          edit: 'quickPathUser/edit'
        },
      }
    },
    methods: {
      onStart() {
        this.drag = true;
      },
      onEnd() {
        this.drag = false;
      },
      add(e) {
        const that = this;
        postAction(this.url.add, {
          quickPathId: this.quickPathData[e.newIndex].id,
          sortNo: e.newIndex
        }).then(res => {
          if(res.success) {
            that.$emit('ok');
          }
        })
      },
      update() {
        const that = this;
        const data = [];
        for (let i = 0; i < this.quickPathData.length; i++) {
          data.push({
            id: this.quickPathData[i].id,
            sortNo: i
          })
        }
        postAction(this.url.edit, data).then(res => {
          if(res.success) {
            that.$emit('ok');
          }
        })
      },
      getQuickPath() {
        getAction(this.url.quickPathList)
          .then(res => {
            if (res.success) {
              this.mockData = res.result;
            }
          });
      },
      handleCancel() {
        this.visible = false;
      },
      handleOk() {
        this.visible = false;
      }
    }
  }
</script>
<style>
  .chosenClass {
    opacity: 1 !important;
  }
  .dragClass {
    opacity: 1 !important;
    box-shadow: none !important;
    outline: none !important;
    background-image: none !important;
  }
  .itxst {
    margin: 10px;
    height: 100%;
    overflow: auto;
    text-align: center;
  }
  .col {
    flex: 1;
    padding: 10px;
    border: solid 1px #eee;
    border-radius: 10px;
    float: left;
    width: 100%;
    background-color: white;
  }
  .col+.col {
    margin-left: 30px;
  }
  .group {
    padding: 8px 12px;
    margin: 0px 10px 10px 10px;
    border: solid 1px #eee;
    border-radius: 5px;
    background-color: white;
    box-shadow: 2px 2px 2px #f0f0f0;
  }
  .group:hover {
    background-color: #fdfdfd;
    cursor: move;
  }
  .group+.group {
    margin-top: 6px;
  }
  .title {
    padding: 5px 6px 6px 6px;
    text-align: left;
    font-weight: bold;
    margin-bottom: 10px;
    border-bottom: 1px solid #ebebeb;
  }
</style>